<template>
    <cl-crud ref="Crud">
        <cl-row>
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <cl-add-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <cl-flex1 />
            <!-- 关键字搜索 -->
            <cl-search-key />
        </cl-row>

        <cl-row>
            <!-- 数据表格 -->
            <cl-table ref="Table">
                <template #column-url="{ scope }">
                    <audio controls :src="scope.row.url"></audio>
                </template>
            </cl-table>
        </cl-row>

        <cl-row>
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </cl-row>

        <!-- 新增、编辑 -->
        <cl-upsert ref="Upsert" />
    </cl-crud>
</template>

<script lang="ts" name="broadcast-audio" setup>
import { onMounted, ref } from "vue";
import { useCrud, useTable, useUpsert } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { ElMessage } from "element-plus";

const { service } = useCool();

// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: "音频名称",
			prop: "name",
			component: { name: "el-input", props: { clearable: true } },
			required: true
		},
		{
			label: "音频作者",
			prop: "author",
			component: { name: "el-input", props: { clearable: true } }
		},
		{ label: "音频封面", prop: "cover", component: { name: "cl-upload" } },
		{ label: "是否默认", prop: "isDefault", component: { name: "cl-switch" } },
		{
			label: "音频链接",
			prop: "url",
			component: {
				name: "cl-upload",
				props: { beforeUpload: onBeforeUpload, type: "file", limit: 1, accept: "audio/*" }
			},
			required: true
		}
	],
	async onSubmit(data, { done, close, next }) {
		if (duration.value == 0) {
			ElMessage.warning("音频时长获取失败,请检测文件是否上传成功");
			return;
		}
		next({
			...data,
			duration: duration.value
		}).then((res) => {
			console.log("asdasdasd");
			duration.value = 0;
		});

		// done 关闭加载状态
		// close 关闭弹窗
	}
});
const duration = ref<number>(0);
async function onBeforeUpload(file: any, item: any) {
	ElMessage.warning("文件检测中");
	return await detectAudioDuration(file).then(() => {
		ElMessage.success("文件检测通过");
	});
}
function detectAudioDuration(file) {
	return new Promise((resolve, reject) => {
		const audioContext = new AudioContext();
		const fileReader = new FileReader();
		fileReader.onload = function (e: any) {
			audioContext.decodeAudioData(
				e.target.result,
				function (buffer) {
					duration.value = Math.round(buffer.duration * 100) / 100;
					console.log(duration.value);
					resolve(true);
				},
				function (err) {
					ElMessage.success("音频解码失败");
					reject("音频解码失败");
					console.error("音频解码失败", err);
				}
			);
		};

		fileReader.readAsArrayBuffer(file);
	});
}
// cl-table
const Table = useTable({
	columns: [
		{ type: "selection" },
		{ label: "音频名称", prop: "name", minWidth: 140 },
		{
			label: "背景图片",
			prop: "cover",
			minWidth: 100,
			component: { name: "cl-image", props: { size: 60 } }
		},
		{ label: "音频作者", prop: "author", minWidth: 140 },
		{ label: "音频链接", prop: "url", minWidth: 300 },
		{ label: "播放次数", prop: "playCount", minWidth: 140 },
		{ label: "音频时长-秒", prop: "duration", minWidth: 140 },
		{ label: "是否默认", prop: "isDefault", component: { name: "cl-switch" } },
		{
			label: "创建时间",
			prop: "createTime",
			minWidth: 170,
			sortable: "custom",
			component: { name: "cl-date-text" }
		},
		{
			label: "更新时间",
			prop: "updateTime",
			minWidth: 170,
			sortable: "custom",
			component: { name: "cl-date-text" }
		},
		{ type: "op", buttons: ["edit", "delete"] }
	]
});

// cl-crud
const Crud = useCrud(
	{
		service: service.broadcast.audio
	},
	(app) => {
		app.refresh();
	}
);
</script>
